<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: august_Ld
  Date: 2022/5/13
  Time: 14:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <base href="<%=basePath%>">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>

<div class="container">
    <h1 style="text-align: center;height: 300px;line-height: 300px">用户管理系统--修改信息</h1>

    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <form action="user/update" method="post" enctype="multipart/form-data">
                <img src="${requestScope.user.profile}" width="50px">
                <input type="hidden" name="id" value="${requestScope.user.id}">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input value="${requestScope.user.name}" type="text" class="form-control" id="username" name="username" placeholder="用户名">
                    <span style="color: red"  id="msg"></span>
                </div>

                <div class="form-group">
                    <label for="profile">头像</label>
                    <input  type="file" id="profile" name="profile">
                </div>

                <div class="form-group">
                    <label for="deptId">部门</label>
                    <select name="deptId" class="form-control">
                        <c:forEach items="${requestScope.depts}" var="dept">
                            <option id="deptId" value="${dept.id}">${dept.name}</option>
                        </c:forEach>
                    </select>
                </div>

                <button type="submit" class="btn btn-default">确认</button>
                <button type="" class="btn btn-default">取消</button>
            </form>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>

<script src="static/js/axios.min.js"></script>
<script>
    //axios
    const instance = axios.create({
        headers: {"Content-Type":"application/x-www-form-urlencoded" }
    });

    let usernameInput = document.getElementById("username");
    usernameInput.addEventListener("blur",function (){
        instance.post('user/checkUserName',
            "username="+usernameInput.value,
        )
            .then(function (data) {

                if (data.data === 'yes') {
                    document.getElementById("msg").innerText = "用户名已经存在！"
                } else {
                    document.getElementById("msg").innerText = "用户名可以使用"
                }
            });

    })

</script>
</body>
</html>
